<template>
	<view>
		<swiper 
			:style="{ height: $g.addUnit(width) }" 
			:circular="true" 
			:previous-margin=" $g.addUnit(previousMargin)" 
			:next-margin=" $g.addUnit(nextMargin)"
		>
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="image-box" :style="{ height: $g.addUnit(width), width: $g.addUnit(width) }">
					<block v-if="item.type === 1">
						<image
							:style="{ height: $g.addUnit(width), width: $g.addUnit(width) }" 
							:src="item.path | media('video')"
							mode="aspectFill"
							@click="preview(item)"
						></image>
						<view class="video-mask" @click.stop="preview(item)">
							<text class="iconfont icon-play2" :style="{ fontSize: $g.addUnit(Math.floor(width / 4)) }"></text>
						</view>
					</block>
					<image
						v-else-if="item.type === 2"
						:style="{ height: $g.addUnit(width), width: $g.addUnit(width) }" 
						:src="item.path | media"
						mode="aspectFill"
						@click="preview(item)"
					></image>
					<image
						v-else
						:style="{ height: $g.addUnit(width), width: $g.addUnit(width) }" 
						:src="item | media"
						mode="aspectFill"
						@click="preview(item)"
					></image>
					
				</view>
			</swiper-item>
		</swiper> 
		<video-player ref="videoPlayer" />
	</view>
</template>

<script>
import videoPlayer from '../video-player/video-player.vue';

export default {
	name: 'SwiperImage',
	components: {
		videoPlayer
	},
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		width: {
			type: Number,
			default: 630
		},
		margin: {
			type: Number,
			default: 24
		}
	},
	computed: {
		previousMargin() {
			return (750 - this.width) / 2;
		},
		nextMargin() {
			return this.previousMargin - this.margin;
		}
	},
	methods: {
		preview(item) {
			if (item.type === 2) {
				let images = this.list.filter(e => e.type === 2).map(e => e.path);
				this.$g.previewImage(item.path, images);
			} else if (item.type === 1) {
				this.$refs['videoPlayer'].previewVideo(item.path);
			} else {
				this.$g.previewImage(item);
			}
		}
	},
	mounted() {
	}
};
</script>

<style lang="scss" scoped>
.image-box {
	position: relative;
	
	.video-mask {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba($color: #000000, $alpha: 0.1);
		
		.iconfont {
			color: #fff;
			opacity: 0.8;
		}
	}
}
</style>
